

<!-- 应用正在 ts-webview/lua/main.lua -->



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello 触动精灵 ShowUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <!--css-->
    <style>
      .rxui {display: flex; justify-content: center; align-items: center; line-height: 14px; font-size: 15px; height: 100vh; flex-direction: column;}
      .content {margin: 0 10px;}
      .content pre {line-height: 13px; max-height:50%; overflow-y: scroll; word-wrap:break-word; white-space: pre-wrap;}
      .content pre span {line-height: 18px;}
      .rxui_title {margin: 0 auto; text-align: center; padding: 5px 0; background-color: #ccc; margin-bottom: 10px;}
      .rxui_des_content {color: #666; margin: 0;}

      #rxui_update {display: none;}
      #rxui_update {max-width: 95%; min-width: 70%; border: 1px solid #ccc; padding-bottom: 10px;}

      /* 加载动画 */
      /* https://juejin.cn/post/7159223323355217928 */
      /* #rxui_loading {
        display: none;
      } */

      .rxui_loading .netLoad.netLoaded {
        display: none;
      }

      #rxui_loading .netLoad {
        display: block;
        animation: rotateDo 1s linear infinite;
        width: 50px; height: 50px; margin: 0 auto;
        border: 5px solid #0ff; border-radius: 50%;
        position: relative;
      }

      #rxui_loading .netLoad>.box {
        position: absolute; top: 50%; left: 50%;  width: 50%; height: 50%;
        background-color: white;
        transform: rotate(40deg);
      }

      @keyframes rotateDo {
        from {
          transform-origin: center center;
          transform: rotate(0deg);
        }
        to {
          transform-origin: center center;
          transform: rotate(360deg);
        }
      }
      #rxui_loading .rx_load_text {margin: 15px 0; font-size: 14px;}

      #rxui_last {display: none;}
      #rxui_none {display: none;}
      .rxui_updated {text-align: center; font-size: 14px; font-weight: bold; margin-bottom: 20px;}

      .rxui_buttons {display: flex; justify-content: center; align-items: center; }
      .rxui_button {margin-right: 30px; padding: 5px 10px;}
      .rxui_button:last-child { margin-right: 0;}
      /* .rxui_button_confim {background-color: blueviolet; color: white;} */
      .rxui_button:link{background-color: #0ff;}

      .rx_no_select {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
      }

    </style>
<body onload="getTsVersion()">
  <div class="rxui">

    <!----------------- 1 首次加载 请求网络  ----------------------->
    <div id=rxui_loading>
      <div id="loading" class="netLoad">
        <div class="box"></div>
      </div>
      <div class="rx_load_text rx_no_select">检查是否有更新</div>
      <div class="rxui_buttons rx_no_select">
        <button id="btn_cancel"  class="rxui_button rxui_button_confim">取消更新</button>
      </div>
    </div>

    <!----------------- 2 有更新  ----------------------->
    <div id="rxui_update">
      <div class="rxui_title">更新</div>
      <div class="content">
        <div class="rxui_des rx_no_select">描述</div>
        <div class="rxui_des_content">
          <pre id="rxui_id_des">none</pre>
        </div>

        <div class="rxui_buttons rx_no_select">
          <button id="btn_cancel" class="rxui_button">取消</button>
          <button id="btn_update" class="rxui_button rxui_button_confim">更新</button>
        </div>
      </div>
    </div>

    <!----------------- 3 最新代码，无需更新  ----------------------->
    <div id=rxui_last>
      <div class="content">
        <div class="rxui_updated rx_no_select">当前已是最新版本</div>
        <div class="rxui_buttons rx_no_select">
          <button id="btn_cancel" class="rxui_button rxui_button_confim">关闭</button>
        </div>
      </div>
    </div>

    <!----------------- 4 无法关闭  ----------------------->
    <div id=rxui_none>
      <div class="content">
        <div class="rxui_updated rx_no_select">脚本没有关闭吗？</div>
        <div class="rxui_buttons rx_no_select">
          <button id="btn_cancel" class="rxui_button rxui_button_confim">关闭</button>
        </div>
      </div>
    </div>

  </div>

  <script>
    // 请求工具

    let xhr = null

    function requestBase(method, ApiUrl, data, succ, fail, final) {
      post_abort()
      method = method || 'POST'
      data = data || ''
      if (!xhr) {
        xhr = new XMLHttpRequest()
      }

      if ("withCredentials" in xhr) {
        // XHR for Chrome/Firefox/Opera/Safari.
        xhr.open(method, ApiUrl, true);
      }
      else if (typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, ApiUrl);
      }
      else {
        // CORS not supported.
        xhr = null;
      }

      if (!xhr) {
        fail && fail()
        final && final()
        return
      }

      xhr.setRequestHeader("Content-type", "application/json")
      xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
      xhr.setRequestHeader("Cache-Control","no-cache");
      xhr.onreadystatechange = function() {
        const XMLHttpReq = xhr
        if (XMLHttpReq.readyState == 4 && XMLHttpReq.status == 200) {
          const text = XMLHttpReq.responseText;
          console.log(text)
          succ && succ(text)
          final && final()
        } else {
          console.log(XMLHttpReq.readyState)
          fail && fail()
          final && final()
        }
      }
      xhr.send(data);
    }

    function requestGet(ApiUrl, data, succ, fail, final) {
      requestBase('GET', ApiUrl, data, succ, fail, final)
    }

    function requestPost(ApiUrl, data, succ, fail, final) {
      requestBase('POST', ApiUrl, data, succ, fail, final)
    }

    // ----- 按钮点击 确认
    function post_confirm(data) {
      console.log('点击 确认按钮 /set_event showUI_commit')
      requestPost(
        '/set_event', // postApi
        ('{"name": "showUI_commit","value":' + data + '}'), // data
        () => {
          // succ
        }, () => {
          // false
        }, () => {
          xhr = null
        }
      )
    }

    // ----- 按钮点击 取消
    function post_cancel() {
      console.log('点击 取消按钮 /set_event showUI_cancel')
      requestPost(
        '/set_event',
        '{"name": "showUI_cancel"}',
        () => {
          // succ
        }, () => {
          // false
        }, () => {
          xhr = null
        }
      )
    }

    // -------- 取消 请求 --------
    function post_abort() {
      xhr && xhr.abort()
    }
  </script>

  <script>
    // 按钮点击
    function btnOnClick(btnId, cb) {
      document.getElementById(btnId).onclick = function() {
        cb && cb()
      }
    }

    // 点击取消
    btnOnClick('btn_cancel', () => post_cancel())

    // 点击确定
    btnOnClick('btn_update', () => {

    })
  </script>

  <script>
    function getTsVersion() {
      //  存在 cors ------ 不能使用
      // 请求是否更新
      const lzy = "https://api.leafone.cn/api/lanzou?url"
      const lzy_url = "https://wwm.lanzouj.com/xxx"
      const pw = '&pwd=xxx'
      const url = lzy + lzy_url + pw


      function questEnd(isSucc, res) {
        isSucc = isSucc || false
        if (isSucc) {
          console.log('蓝奏云请求 成功了----')
          console.log(res)
        } else {
          console.log('蓝奏云请求 失败')
        }
      }

      requestGet(url,null, (e)=> {questEnd(true, e)}, ()=>{questEnd(), () => {}})
    }
  </script>
</body>
</html>